<template>
  <div 
    :id="id" 
  />
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props:['id','title'],
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
      setTimeout(() => {
        this.draw()
      })
      window.addEventListener('resize', this.resizeChart)
    },
    activated() {
      if (this.chart) {
        this.resizeChart()
      }
    },
    methods: {
      resizeChart() {
        this.chart.resize()
      },
      draw() {
        const { title,id } = this
        this.chart = echarts.init(document.getElementById(id))
        
        const option = {
          title: {
            text: title?title:''
          },
          grid: {
            left: '3%',
            right: '7%',
            bottom: '7%',
            containLabel: true
          },
          tooltip: {
            // trigger: 'axis',
            showDelay: 0,
            formatter: function (params) {
              if (params.value.length > 1) {
                return (
                  params.seriesName +
                  ' : AGE:' +
                  Math.round(params.value[0]) +
                  ' RANK-SCORE:' +
                  params.value[1]
                );
              } else {
                return null
              }
            },
            axisPointer: {
              show: true,
              type: 'cross',
              lineStyle: {
                type: 'dashed',
                width: 1
              }
            }
          },
          toolbox: {
            feature: {
              dataZoom: {},
              brush: {
                type: ['rect', 'polygon', 'clear']
              }
            }
          },
          brush: {},
          legend: {
            data: ['♀', '♂'],
            left: 'center',
            bottom: 10
          },
          xAxis: [
            {
              type: 'value',
              scale: true,
              axisLabel: {
                formatter: '{value} 岁'
              },
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              axisLabel: {
                formatter: '{value}'
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '♀',
              type: 'scatter',
              emphasis: {
                focus: 'series'
              },
              // prettier-ignore
              data:    [[16.12, 51.6], [16.75, 59.0], [15.95, 49.2], [15.70, 63.0], [15.58, 53.6],
                        [17.00, 59.0], [15.91, 47.6], [16.60, 69.8], [17.62, 66.8], [16.02, 75.2],
                        [17.25, 55.2], [17.09, 54.2], [17.29, 62.5], [15.34, 42.0], [16.00, 50.0],
                        [14.72, 49.8], [16.82, 49.2], [17.50, 73.2], [15.70, 47.8], [16.76, 68.8],
                        [15.95, 50.6], [17.50, 82.5], [16.68, 57.2], [17.65, 87.8], [17.02, 72.8],
                        [17.40, 54.5], [17.30, 59.8], [17.99, 67.3], [17.05, 67.8], [16.00, 47.0],
                        [15.44, 46.2], [16.20, 55.0], [17.65, 83.0], [16.00, 54.4], [15.20, 45.8],
                        [16.21, 53.6], [17.00, 73.2], [16.02, 52.1], [16.13, 67.9], [16.64, 56.6],
                        [16.89, 62.3], [16.38, 58.5], [16.76, 54.5], [16.00, 50.2], [16.13, 60.3],
                        [16.76, 58.3], [16.51, 56.2], [16.00, 50.2], [17.00, 72.9], [15.75, 59.8],
                        [16.76, 61.0], [16.07, 69.1], [16.32, 55.9], [15.24, 46.5], [15.75, 54.3],
                        [16.83, 54.8], [18.03, 60.7], [16.55, 60.0], [16.50, 62.0], [16.45, 60.3],
                        [15.60, 52.7], [16.00, 74.3], [16.30, 62.0], [16.57, 73.1], [16.10, 80.0],
                        [16.20, 54.7], [16.60, 53.2], [17.40, 75.7], [17.27, 61.1], [16.76, 55.7],
                        [15.11, 48.7], [16.45, 52.3], [16.35, 50.0], [15.20, 59.3], [16.90, 62.5],
                        [16.40, 55.7], [16.12, 54.8], [15.50, 45.9], [17.00, 70.6], [17.62, 67.2],
                        [17.00, 69.4], [16.25, 58.2], [17.03, 64.8], [16.41, 71.6], [16.95, 52.8],
                        [16.32, 59.8], [15.45, 49.0], [15.98, 50.0], [17.32, 69.2], [17.00, 55.9],
                        [16.14, 63.4], [16.90, 58.2], [16.62, 58.6], [15.94, 45.7], [16.25, 52.2],
                        [15.90, 48.6], [16.28, 57.8], [15.90, 55.6], [17.98, 66.8], [16.29, 59.4],
                        [16.10, 53.6], [15.11, 73.2], [16.82, 53.4], [16.89, 69.0], [17.32, 58.4],
                        [17.18, 56.2], [17.80, 70.6], [16.43, 59.8], [16.30, 72.0], [16.85, 65.2],
                        [16.68, 56.6], [17.27, 15.2], [19.65, 51.8], [16.94, 63.4], [16.78, 59.0],
                        [15.95, 47.6], [16.76, 63.0], [16.12, 55.2], [16.00, 45.0], [16.32, 54.0],
                        [16.22, 50.2], [16.13, 60.2], [14.95, 44.8], [15.75, 58.8], [16.32, 56.4],
                        [17.27, 62.0], [15.50, 49.2], [15.65, 67.2], [16.40, 53.8], [16.09, 54.4],
                        [16.28, 58.0], [16.70, 59.8], [16.00, 54.8], [16.00, 43.2], [16.89, 60.5],
                        [15.82, 46.4], [15.60, 64.4], [16.00, 48.8], [16.71, 62.2], [15.80, 55.5],
                        [16.76, 57.8], [15.60, 54.6], [16.21, 59.2], [17.34, 52.7], [15.98, 53.2],
                        [17.05, 64.5], [15.92, 51.8], [15.75, 56.0], [16.13, 63.6], [16.26, 63.2],
                        [16.00, 59.5], [16.89, 56.8], [16.51, 64.1], [16.26, 50.0], [16.51, 72.3],
                        [16.64, 55.0], [16.00, 55.9], [15.24, 60.4], [17.02, 69.1], [16.26, 84.5],
                        [17.02, 55.9], [15.88, 55.5], [17.27, 69.5], [16.76, 76.4], [16.26, 61.4],
                        [16.76, 65.9], [15.62, 58.6], [17.52, 66.8], [17.21, 56.6], [16.26, 58.6],
                        [16.00, 55.9], [16.51, 59.1], [18.29, 81.8], [16.64, 70.7], [16.51, 56.8],
                        [17.78, 60.0], [16.51, 58.2], [17.53, 72.7], [15.49, 54.1], [15.88, 49.1],
                        [17.27, 75.9], [16.89, 55.0], [16.13, 57.3], [16.76, 55.0], [16.51, 65.5],
                        [17.53, 65.5], [15.75, 48.6], [16.38, 58.6], [16.76, 63.6], [16.51, 55.2],
                        [16.51, 62.7], [16.89, 56.6], [16.26, 53.9], [16.45, 63.2], [17.65, 73.6],
                        [16.89, 62.0], [17.53, 63.6], [15.94, 53.2], [16.00, 53.4], [17.02, 55.0],
                        [16.26, 70.5], [16.76, 54.5], [16.26, 54.5], [16.07, 55.9], [16.00, 59.0],
                        [15.75, 63.6], [16.26, 54.5], [15.24, 47.3], [17.02, 67.7], [16.51, 80.9],
                        [17.27, 70.5], [16.51, 60.9], [17.02, 63.6], [17.02, 54.5], [17.02, 59.1],
                        [16.13, 70.5], [16.76, 52.7], [16.76, 62.7], [16.51, 86.3], [16.26, 66.4],
                        [15.24, 67.3], [16.89, 63.0], [17.02, 73.6], [17.52, 62.3], [17.52, 57.7],
                        [16.00, 55.4], [16.51, 104.1], [18.7, 55.5], [17.02, 77.3], [16.00, 80.5],
                        [16.76, 64.5], [16.76, 72.3], [16.76, 61.4], [15.49, 58.2], [16.26, 81.8],
                        [17.53, 63.6], [17.14, 53.4], [15.75, 54.5], [16.51, 53.6], [16.00, 60.0],
                        [17.40, 73.6], [16.26, 61.4], [17.40, 55.5], [16.26, 63.6], [16.13, 60.9],
                        [15.62, 60.0], [14.99, 46.8], [16.95, 57.3], [16.00, 64.1], [17.53, 63.6],
                        [16.95, 67.3], [16.00, 75.5], [17.27, 68.2], [16.26, 61.4], [15.75, 76.8],
                        [17.65, 71.8], [16.44, 55.5], [16.07, 48.6], [17.40, 66.4], [16.38, 67.3]
                    ],
              markArea: {
                silent: true,
                itemStyle: {
                  color: 'transparent',
                  borderWidth: 1,
                  borderType: 'dashed'
                },
                data: [
                  [
                    {
                      name: '♂',
                      xAxis: 'min',
                      yAxis: 'min'
                    },
                    {
                      xAxis: 'max',
                      yAxis: 'max'
                    }
                  ]
                ]
              },
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                lineStyle: {
                  type: 'solid'
                },
                data: [{ type: 'average', name: 'AVG' }, { xAxis: 160 }]
              }
            },
            {
              name: '♂',
              type: 'scatter',
              emphasis: {
                focus: 'series'
              },
              // prettier-ignore
              data:    [[17.40, 65.6], [17.53, 71.8], [19.35, 80.7], [18.65, 72.6], [18.72, 78.8],
                        [18.15, 74.8], [18.40, 86.4], [18.45, 78.4], [17.50, 62.0], [18.40, 81.6],
                        [18.00, 76.6], [17.78, 83.6], [19.20, 90.0], [17.60, 74.6], [17.40, 71.0],
                        [18.40, 79.6], [19.27, 93.8], [17.15, 70.0], [17.30, 72.4], [17.60, 85.9],
                        [17.60, 78.8], [18.05, 77.8], [17.27, 66.2], [17.60, 86.4], [17.35, 81.8],
                        [17.80, 89.6], [18.03, 82.8], [18.03, 76.4], [16.45, 63.2], [17.30, 60.9],
                        [18.35, 74.8], [17.55, 70.0], [18.80, 72.4], [18.92, 84.1], [17.28, 69.1],
                        [17.00, 59.5], [18.20, 67.2], [17.00, 61.3], [17.78, 68.6], [18.42, 80.1],
                        [18.67, 87.8], [17.14, 84.7], [17.27, 73.4], [17.53, 72.1], [18.03, 82.6],
                        [18.29, 88.7], [18.80, 84.1], [17.72, 94.1], [17.21, 74.9], [16.70, 59.1],
                        [16.95, 75.6], [17.40, 86.2], [17.27, 75.3], [18.22, 87.1], [16.41, 55.2],
                        [16.30, 57.0], [17.15, 61.4], [18.42, 76.8], [17.40, 86.8], [17.40, 72.2],
                        [17.70, 71.6], [18.60, 84.8], [16.70, 68.2], [17.18, 66.1], [18.20, 72.0],
                        [16.70, 64.6], [17.78, 74.8], [16.45, 70.0], [19.20, 101.6], [16.75, 63.2],
                        [17.12, 79.1], [18.16, 78.9], [16.74, 67.7], [18.11, 66.0], [17.70, 68.2],
                        [17.45, 63.9], [17.75, 72.0], [17.05, 56.8], [18.24, 74.5], [19.71, 90.9],
                        [18.01, 93.0], [17.55, 80.9], [18.06, 72.7], [18.44, 68.0], [17.55, 70.9],
                        [18.06, 72.5], [17.70, 72.5], [17.71, 83.4], [18.16, 75.5], [17.65, 73.0],
                        [17.50, 70.2], [17.40, 73.4], [16.51, 70.5], [17.70, 68.9], [19.20, 102.3],
                        [17.65, 68.4], [16.94, 65.9], [18.21, 75.7], [17.98, 84.5], [17.53, 87.7],
                        [18.49, 86.4], [17.73, 73.2], [16.74, 53.9], [17.81, 72.0], [16.89, 55.5],
                        [15.72, 58.4], [18.03, 83.2], [17.02, 72.7], [17.78, 64.1], [17.27, 72.3],
                        [16.51, 65.0], [18.67, 86.4], [16.51, 65.0], [17.40, 88.6], [17.53, 84.1],
                        [18.54, 66.8], [17.78, 75.5], [18.03, 93.2], [18.03, 82.7], [17.78, 58.0],
                        [17.78, 79.5], [17.78, 78.6], [17.78, 71.8], [17.78, 116.4], [16.8, 72.2],
                        [18.80, 83.6], [19.81, 85.5], [17.53, 90.9], [16.64, 85.9], [19.05, 89.1],
                        [16.64, 75.0], [17.78, 77.7], [17.97, 86.4], [17.27, 90.9], [19.05, 73.6],
                        [18.54, 76.4], [16.89, 69.1], [16.76, 84.5], [17.53, 64.5], [17.02, 69.1],
                        [19.05, 18.6], [17.78, 86.4], [19.05, 80.9], [17.78, 87.7], [18.42, 94.5],
                        [17.65, 80.2], [17.78, 72.0], [18.03, 71.4], [17.14, 72.7], [17.27, 84.1],
                        [17.27, 76.8], [17.78, 63.6], [17.78, 80.9], [18.29, 80.9], [17.02, 85.5],
                        [16.76, 68.6], [17.53, 67.7], [16.51, 66.4], [18.54, 12.3], [18.16, 70.5],
                        [17.27, 95.9], [19.05, 84.1], [17.91, 87.3], [17.53, 71.8], [17.02, 65.9],
                        [19.30, 95.9], [17.14, 91.4], [17.78, 81.8], [17.78, 96.8], [16.76, 69.1],
                        [16.76, 82.7], [18.03, 75.5], [18.29, 79.5], [17.65, 73.6], [18.67, 91.8],
                        [18.80, 84.1], [18.80, 85.9], [17.78, 81.8], [17.40, 82.5], [17.78, 80.5],
                        [17.14, 70.0], [18.54, 81.8], [18.54, 84.1], [18.80, 90.5], [18.80, 91.4],
                        [18.29, 89.1], [17.65, 85.0], [17.53, 69.1], [17.53, 73.6], [18.80, 80.5],
                        [18.80, 82.7], [17.53, 86.4], [17.05, 67.7], [17.91, 92.7], [17.78, 93.6],
                        [17.53, 70.9], [18.29, 75.0], [17.08, 93.2], [18.80, 93.2], [18.03, 77.7],
                        [17.78, 61.4], [18.54, 94.1], [16.89, 75.0], [18.54, 83.6], [18.03, 85.5],
                        [17.40, 73.9], [16.76, 66.8], [18.29, 87.3], [16.00, 72.3], [18.03, 88.6],
                        [16.76, 75.5], [18.67, 11.4], [17.53, 91.1], [17.53, 67.3], [17.59, 77.7],
                        [17.53, 81.8], [17.91, 75.5], [18.16, 84.5], [17.78, 76.6], [18.29, 85.0],
                        [17.78, 10.5], [19.82, 77.3], [17.91, 71.8], [17.65, 87.9], [18.80, 94.3],
                        [17.40, 70.9], [16.76, 64.5], [17.02, 77.3], [16.76, 72.3], [18.80, 87.3],
                        [17.40, 80.0], [17.65, 82.3], [18.03, 73.6], [16.76, 74.1], [18.80, 85.9],
                        [18.03, 73.2], [16.76, 76.3], [18.30, 65.9], [18.30, 90.9], [17.91, 89.1],
                        [17.02, 62.3], [17.78, 82.7], [17.91, 79.1], [19.05, 98.2], [17.78, 84.1],
                        [18.03, 83.2], [18.03, 83.2]
                    ],
              markArea: {
                silent: true,
                itemStyle: {
                  color: 'transparent',
                  borderWidth: 1,
                  borderType: 'dashed'
                },
                data: [
                  [
                    {
                      name: '♀',
                      xAxis: 'min',
                      yAxis: 'min'
                    },
                    {
                      xAxis: 'max',
                      yAxis: 'max'
                    }
                  ]
                ]
              },
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                lineStyle: {
                  type: 'solid'
                },
                data: [{ type: 'average', name: 'Average' }, { xAxis: 170 }]
              }
            }
          ]
        };
        
        const zoomSize = 6;
        this.chart.setOption(option)
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
</style>